import React, { Component } from 'react'
import { StyleSheet, Text, View, TouchableNativeFeedback, Alert } from 'react-native'

export default class SayHello extends Component {
    constructor(props) {
        super(props)

        this.state = {
            name: 'yinpeng'
        }
    }

    componentDidMount() {
        const _name = this.props.name

        this.setState({
            name: _name
        })
    }

    _onSayHi() {
        Alert.alert('hi~ ' + this.state.name)
    }

    render() {
        return (
            <View style={layout.box}>
                <TouchableNativeFeedback onPress={this._onSayHi.bind(this)} underlayColor="white">
                    <Text style={layout.baise}>hello {this.state.name}</Text>
                </TouchableNativeFeedback>
            </View>
        )
    }
}

const layout = StyleSheet.create({
    box: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderStyle: 'solid',
        borderWidth: 1,
        borderColor: '#2196F3',
        backgroundColor: '#2196F3',
        margin: 20,
        padding: 5,
        borderRadius: 10,
    },

    huise: {
        color: '#666'
    },

    baise: {
        color: '#fff'
    }
})